import React from 'react';
import { ArrowPathIcon } from '@heroicons/react/24/outline';

const Header = ({ lastUpdate, onRefresh, loading, connectionStatus }) => {
  const formatLastUpdate = (date) => {
    if (!date) return '-';
    return date.toLocaleTimeString();
  };

  const getConnectionStatusColor = (status) => {
    switch (status) {
      case 'connected':
        return 'bg-green-100 text-green-800 border border-green-200';
      case 'connecting':
        return 'bg-yellow-100 text-yellow-800 border border-yellow-200';
      case 'disconnected':
        return 'bg-red-100 text-red-800 border border-red-200';
      default:
        return 'bg-gray-100 text-gray-800 border border-gray-200';
    }
  };

  const getConnectionStatusText = (status) => {
    switch (status) {
      case 'connected':
        return 'Live';
      case 'connecting':
        return 'Connecting...';
      case 'disconnected':
        return 'Disconnected';
      default:
        return 'Unknown';
    }
  };

  return (
    <header className="bg-white shadow-soft border-b border-gray-200">
      <div className="w-full px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center py-6">
          <div className="flex items-center space-x-4">
            <div className="flex items-center space-x-3">
              <div className="w-10 h-10 bg-primary-600 rounded-xl flex items-center justify-center">
                <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                </svg>
              </div>
              <div>
                <h1 className="text-3xl font-bold text-gray-900 tracking-tight">CloudHolter</h1>
                <p className="text-sm text-gray-500 mt-1">Real-time system monitoring dashboard</p>
              </div>
            </div>
            <span className={`px-4 py-2 text-sm font-semibold rounded-full ${getConnectionStatusColor(connectionStatus)}`}>
              {getConnectionStatusText(connectionStatus)}
            </span>
          </div>
          <div className="flex items-center space-x-6">
            <div className="text-sm text-gray-600">
              <span className="font-medium">Last updated:</span>
              <span className="ml-2 font-mono text-gray-900">{formatLastUpdate(lastUpdate)}</span>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
};

export default Header;